<g:setProvider library="jquery"/>
<g:hasErrors>
      <div class="errors">
        Fields with * are required.
      </div>
    </g:hasErrors>
<g:if test="${flash.message}">
      <div class="errors">${flash.message}</div>
</g:if>
<div class="tabContent" style="position:relative" role="${role}">
  <div class="body">
    
    
    
    <g:formRemote name="userRegistrationForm" method="post" url="[controller:'register',action:'save']" update="menu-content">
      <div class="dialog">

      </div>
      <table border=0 style="WIDTH: 800px; HEIGHT: 22px" cellSpacing=1 cellPadding=1 width=800  align=center>
        <caption><b>User Family Information</b></caption>
        <tbody>
          <tr>
            <td width=150>User Name *</td>
            <td valign='top' class='value ${hasErrors(bean:person,field:'username','errors')}'><input type="text" name='username' value="${person?.username?.encodeAsHTML()}" id="UserID" maxLength=16 style="WIDTH: 128px; HEIGHT: 22px" tabindex=0 size=8 /></td>
            <td COLSPAN=4>This User Profile will be used in your next log on</td>
          </tr>
          <tr>
            <td COLSPAN=6 style="FONT-SIZE: xx-small" valign=center>
              <HR>
            </td>
          </tr>
          <tr>
            <td COLSPAN=6 valign=center>
              <CENTER>	<B>Father Information:</B> </CENTER>
            </td>
          </tr>
          <tr valign=center>
            <td  width=120 class='name'><label for='fatherLastName'>Last Name * :</label></td>
            <td class='value ${hasErrors(bean:family,field:'fatherLastName','errors')}'>
              <input type="text" name='fatherLastName' value="${family?.fatherLastName?.encodeAsHTML()}" maxLength =15 size=15 style="WIDTH: 111px; HEIGHT: 22px" /></td>
            <td width=120 class='name'><label for='family?.fatherFirstName'>First Name * :</label></td>
            <td class='value ${hasErrors(bean:family,field:'fatherFirstName','errors')}'>
              <input  maxLength =15 name='fatherFirstName' value="${family?.fatherFirstName?.encodeAsHTML()}" size=13 style="WIDTH: 111px; HEIGHT: 22px" /></td>
            <td width=120 class='name'><label for='fatherChineseName'>Chinese Name</label></td>
            <td class='value ${hasErrors(bean:family,field:'fatherChineseName','errors')}'>
              <input  maxLength =15 name='fatherChineseName' value="${family?.fatherChineseName?.encodeAsHTML()}" size=14 style="WIDTH: 123px; HEIGHT: 22px"/></td>
          </tr>
          <tr>
            <td COLSPAN=6 valign=center>
              <CENTER>	<B>Mother Information:</B> </CENTER>
            </td>
          </tr>
          <tr valign=center>
            <td  width=120><label for='motherLastName'>Last Name * :</label></td>
            <td class='value ${hasErrors(bean:person,field:'motherLastName','errors')}'>
              <input type="text" name='motherLastName' value="${family?.motherLastName?.encodeAsHTML()}" maxLength =15 size=15 style="WIDTH: 111px; HEIGHT: 22px" /></td>
            <td width=120><label for='motherFirstName'>First Name * :</label></td>
            <td class='value ${hasErrors(bean:family,field:'motherFirstName','errors')}'>
              <input  maxLength =15 name='motherFirstName' value="${family?.motherFirstName?.encodeAsHTML()}" size=13 style="WIDTH: 111px; HEIGHT: 22px" /></td>
            <td width=120 class='name'><label for='motherChineseName'>Chinese Name</label></td>
            <td class='value ${hasErrors(bean:family,field:'motherChineseName','errors')}'>
              <input  maxLength =15 name='motherChineseName' value="${family?.motherChineseName?.encodeAsHTML()}" size=14 style="WIDTH: 123px; HEIGHT: 22px"/></td>
          </tr>
          <tr>
            <td width=120 class='name'><label for='address'>Adress*:</label></td>
            <td COLSPAN=5 class='value ${hasErrors(bean:family,field:'address','errors')}'>
              <input type="text" name='address' value="${family?.address?.encodeAsHTML()}"  maxLength =50 size=50 />
            </td>
          </tr>
          <tr>
            <td width=120 class='name'><label for='city'>City*:</label></td>
            <td class='value ${hasErrors(bean:family,field:'city','errors')}'>
              <input type="text" name='city' maxLength =20 size=15 style="WIDTH: 138px; HEIGHT: 22px" value="${family?.city?.encodeAsHTML()}"/>
            </td>
            <td class='name'><label for='state'>State*:</label></td>
            <td align="left" class='value ${hasErrors(bean:family,field:'state','errors')}'>
              <input type="text" align="left" name='state' maxLength =2 size=2 value=IL value="${family?.state?.encodeAsHTML()}"/>
            </td>
            <td class='name'><label for='zipCode'>Zip Code*:</label></td>
            <td class='value ${hasErrors(bean:family,field:'zipCode','errors')}'>
              <input type="text" name='zipCode' maxLength =5 size=15 value="${family?.zipCode?.encodeAsHTML()}"/>
            </td>
          </tr>


          <tr valign=center>
            <td width=120 class='name'><label for='homePhone'>Home Phone*:</label></td>
            <td valign='top'>
					(<input type="text" name='homeTel_1' maxLength="3" size="3" style="WIDTH: 33px; HEIGHT: 22px" value="${family?.homeTel_1?.encodeAsHTML()}"/>)
              <input type="text" name='homeTel_2' maxLength="3" size="3" style="WIDTH: 33px; HEIGHT: 22px" value="${family?.homeTel_2?.encodeAsHTML()}"/>-
              <input type="text" name='homeTel_3' maxLength="4" size="4" style="WIDTH: 45px; HEIGHT: 22px" value="${family?.homeTel_3?.encodeAsHTML()}"/>
            </td>
            <td width="100" valign='top' class='name'><label for='workPhone'>Work Phone:</label></td>
            <td COLSPAN=3>
					(<input type="text" name='workTel_1' maxLength="3" size="3" style="WIDTH: 34px; HEIGHT: 22px" value="${family?.workTel_1?.encodeAsHTML()}"/>)
              <input type="text" name='workTel_2' maxLength="3" size="3" style="WIDTH: 34px; HEIGHT: 22px" value="${family?.workTel_2?.encodeAsHTML()}"/>-
              <input type="text" name='workTel_3' maxLength="4" size="4" style="WIDTH: 46px; HEIGHT: 22px" value="${family?.workTel_3?.encodeAsHTML()}"/> X
              <input maxLength=10 name="workTel_ext" size="10" value="${family?.workTel_ext?.encodeAsHTML()}"/>
            </td>
          </tr>
          <tr>
            <td COLSPAN=6>
              <hr>
            </td>
          </tr>
          <tr>
            <td width=120 class='name'><label for='email'>E-mail Address * :</label></td>
            <td COLSPAN=5 class='value ${hasErrors(bean:person,field:'email','errors')}'>
              <input type="text" name='email'  maxLength =50 size="50" value="${person?.email?.encodeAsHTML()}"/>
            </td>
          </tr>
          <tr>
            <td COLSPAN=6>
              <hr>
            </td>
          </tr>

          <tr class='prop'>
            <td valign='top' class='name'><label for='passwd'>Password*:</label></td>
            <td valign='top' class='value ${hasErrors(bean:person,field:'passwd','errors')}'>
              <input type="password" name='passwd' value="${person?.passwd?.encodeAsHTML()}"/>
            </td>
          </tr>

          <tr class='prop'>
            <td valign='top' class='name'><label for='enabled'>Confirm Password*:</label></td>
            <td valign='top' class='value ${hasErrors(bean:person,field:'passwd','errors')}'>
              <input type="password" name='repasswd' value="${person?.passwd?.encodeAsHTML()}"/>
            </td>
          </tr>



          <tr class='prop'>
            <td valign='bottom' class='name'><label for='code'>Enter Code*: </label></td>
            <td valign='top' class='name'>
              <input type="text" name="captcha" size="8"/>
              <img src="${createLink(controller:'captcha', action:'index')}" align="absmiddle"/>
            </td>
          </tr>

          <tr>
            <td COLSPAN=6>
              <HR>
            </td>
          </tr>
          <tr valign=center>
        <CENTER>
          <td COLSPAN=2 ></td>
          <td><input class='save' type=submit value="Create" maxLength =450 name="Submit" size=450 /></td>
          <td COLSPAN=3><input class='save' type=reset value="Reset" maxLength =450 onClick="location.reload();" size=450 /></td>
        </CENTER>
        </tr>



        </tbody>
      </table>


    </g:formRemote>
  </div>
</div>

